<template>
  <div class="content-hotcity">
    <back-bar title="选择城市" @toBack="toBack" />
    <hot-serch :citys="[currentCity]" title="所在城市" @toHotCity="toHotCity"></hot-serch>
    <hot-serch :citys="citys" title="热门城市" @toHotCity="toHotCity" />
    <van-index-bar
      class="indexBar"
      :sticky-offset-top="50"
      highlight-color="#FF5654"
      :index-list="indexList"
    >
      <div v-for="(item,index) in allCity.city" :key="index">
        <van-index-anchor :index="item.title">{{item.title}}</van-index-anchor>
        <van-cell
          @click="chooseCity(citem)"
          v-for="(citem,cindex) in item.lists"
          :key="cindex"
          :title="citem"
        />
      </div>
    </van-index-bar>
  </div>
</template>

<script>
import BackBar from "@/components/conten/backbar/BackBar";
import HotSerch from "@/components/common/hotserch/HotSerch";

import { getHotCityList } from "network/hotcity";
import { mapState, mapMutations } from "vuex";

import allCity from "assets/json/city";

export default {
  name: "",
  data() {
    return {
      citys: [],
      allCity,
      indexList: [
        "A",
        "B",
        "C",
        "D",
        "E",
        "F",
        "G",
        "H",
        "J",
        "K",
        "L",
        "M",
        "N",
        "P",
        "Q",
        "R",
        "S",
        "T",
        "W",
        "X",
        "Y",
        "Z",
      ],
    };
  },
  components: {
    BackBar,
    HotSerch,
  },
  methods: {
    ...mapMutations({
      getCity: "moduleHotCity/getCity",
    }),
    toBack() {
      this.$router.push("/");
    },
    toHotCity(item) {
      localStorage.setItem("city", item);
      this.getCity(item);
      this.$router.push("/");
    },
    chooseCity(item) {
      localStorage.setItem("city", item);
      this.getCity(item);
      this.$router.push("/");
    },
  },
  created() {
    getHotCityList().then((res) => {
      for (let item of res.data) {
        this.citys.push(item.name);
      }
    });
  },
  computed: {
    ...mapState({
      currentCity:(state) => state.moduleHotCity.currentCity
    }),
  },
};
</script>

<style scoped>
.content-hotcity {
  background-color: #efefef;
  padding-top: 50px;
}
</style>